<template>
    <div class="RealtimeChart">
        <div class="realtimeChart">
            <Echarts :option="option" />
        </div>
        <div class="technologyChart">
            <TechnologyChart :details="details" />
        </div>
    </div>
</template>

<script setup>
import { reactive, watch } from "vue"

import $color from "@/color"
import Echarts from "@/components/Echarts/Echarts.vue"
import TechnologyChart from "@/components/TechnologyChart.vue"

const props = defineProps({
    realtime: {
        type: Object,
        default: () => ({})
    }
})

const option = reactive({})
const details = reactive({})
const borderColor = "#20232c"

watch(() => props.realtime, async () => {
    renderChart()
}, { deep: true })

const renderChart = () => {
    let { realtime } = props
    let { code, name, current: { price, increase, ratio }, list = [], maxPoints, details: { analysis } } = realtime

    const axisCommon = { axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }
    const color = ratio.at(0) == "-" ? $color.downColor : ratio.at(0) == "+" ? $color.upColor : "#fff"

    // 用 markArea 标注背离
    const markAreaDivergence = (() => {
        let result = {
            markArea: {
                silent: true,
                data: []
            }
        }
        let { bottom, top } = analysis.divergence

        if (bottom) {
            let style = {
                label: {
                    position: "inside",
                    formatter: `底背离[${bottom.range.length}]`,
                    fontWeight: "bold",
                    fontSize: 10,
                    color: $color.downColor
                },
                itemStyle: {
                    borderWidth: 0.8,
                    borderType: "dashed",
                    borderColor: $color.downBorderColor,
                    color: $color.downBackgroundColor
                },
            }
            result.markArea.data.push([
                { xAxis: bottom.range.at(0), ...style },
                { xAxis: bottom.range.at(-1), ...style }
            ])
        }
        if (top) {
            let style = {
                label: {
                    position: "inside",
                    formatter: `顶背离[${top.range.length}]`,
                    fontWeight: "bold",
                    fontSize: 10,
                    color: $color.upColor
                },
                itemStyle: {
                    borderWidth: 0.8,
                    borderType: "dashed",
                    borderColor: $color.upBorderColor,
                    color: $color.upBackgroundColor
                },
            }
            result.markArea.data.push([
                { xAxis: top.range.at(0), ...style },
                { xAxis: top.range.at(-1), ...style }
            ])
        }
        return result
    })()

    let timeData = new Array(maxPoints)
    let priceData = []
    let volumeData = []

    list.forEach(([price, volume], index) => {
        timeData[index] = index
        priceData[index] = price
        volumeData[index] = { value: volume, itemStyle: { color: price > list[index == 0 ? 0 : index - 1][0] ? $color.upColor : $color.downColor } }
    })

    Object.assign(option, {
        animation: false,
        title: {
            padding: [36, 20],
            text: price,
            subtext: `${increase} ${ratio}`,
            textStyle: { fontSize: 36, textBorderColor: "#161922", textBorderWidth: 3, color },
            subtextStyle: { lineHeight: 0, fontSize: 16, textBorderColor: "#161922", textBorderWidth: 3, color }
        },
        grid: [
            { top: 0, left: 0, right: 0, height: '100%' },
            { top: 0, left: 0, right: 0, height: '80%' },
        ],
        xAxis: [
            { type: 'category', data: timeData, gridIndex: 0, ...axisCommon },
            { type: 'category', data: timeData, gridIndex: 1, ...axisCommon },
        ],
        yAxis: [
            { type: 'value', gridIndex: 0, ...axisCommon, scale: true, splitNumber: 3, splitLine: { lineStyle: { width: 0.8, color: borderColor } } },
            { type: 'value', gridIndex: 1, ...axisCommon, inverse: true },
        ],
        series: [
            { name: 'price', type: 'line', xAxisIndex: 0, yAxisIndex: 0, data: priceData, lineStyle: { width: 1, color: "#fff" }, symbol: "none", ...markAreaDivergence },
            // 折线图系列
            { name: 'volume', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: volumeData },
        ],
        graphic: [
            {
                type: "text",
                left: "center",
                top: "50%",
                style: {
                    text: name,
                    fontSize: 48,
                    fill: borderColor
                }
            },
            {
                type: "text",
                left: "center",
                top: "85%",
                style: {
                    text: code,
                    fontWeight: "bold",
                    fontSize: 22,
                    fill: borderColor
                },
            }
        ]
    })

    Object.assign(details, realtime.details)
}

</script>

<style lang="scss" scoped>
.RealtimeChart {
    display: flex;
    flex-direction: column;
    height: 100%;

    >.realtimeChart {
        flex: 1;
        position: relative;
    }

    >.technologyChart {
        height: 110upx;
    }
}
</style>